<script setup>
import { useRouter } from 'vue-router'
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = defineProps({
  rightNewsData: {
    type: Array,
    default: () => []
  }
})

//跳转新闻详情
const router = useRouter()
const goDetail = (newsId) => {
  router.push({ name: 'newsDetail', params: { words: newsId } })
}
</script>

<template>
  <div v-for="(item, index) in rightNewsData" :key="index">
    <div
      class="text"
      @click="goDetail(item.newsId)"
      :style="{
        fontWeight: index === 0 ? 'bold' : 'normal',
        fontSize: index === 0 ? '20px' : '16px',
        marginBottom: '13px'
      }"
    >
      {{ item.title }}
    </div>
  </div>
</template>

<style scoped>
.text {
  transition: text-decoration 0.3s;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.text:hover {
  text-decoration: underline;
  color: #ec3742;
  cursor: pointer;
}
</style>
